<template>
  <div class="warp_box">
    <div class="bar_box"><Bar/></div>
    <div class="content_box">
    <el-page-header @back="goBack" content="文章详情" class="goback"></el-page-header>
    <div class="top_box">
        <div class="left_box">
          <img :src="articleDetail.author.avatar" alt="" class="article_img" v-if="articleDetail.author.avatar">
        </div>
        <div class="right_box">
          <div class="art_num">
            <span>文章编号:</span>
            <span>{{articleDetail.id}}</span>
          </div>
          <div class="art_num">
            <span>文章名称:</span>
            <span>{{articleDetail.title}}</span>
          </div>
          <div class="art_num">
            <span>创建时间:</span>
            <span>{{articleDetail.create_time}}</span>
          </div>
        </div>
      </div>
      <div class="modify_box">
       <!-- <div class="context">{{articleDetail.content}}</div> -->
        <div class="context">
            <!-- 展示博客内容，只需要将编辑框和导航栏设置为 false 即可 -->
            <mavon-editor v-model="articleDetail.content" 
                            class="formContent" 
                            :editable="false" 
                            :subfield="false" 
                            defaultOpen="preview" 
                            :toolbarsFlag="false" ></mavon-editor>
        </div>
      </div>
      <div class="cross" v-if="this.to=='Article'">
      <el-button type="primary" @click="dialogVisible3 = true" v-if="articleDetail.author.status=='rejected' || articleDetail.author.status=='pending'">审核通过</el-button>

        <el-dialog
          title="提示"
          :visible.sync="dialogVisible3"
          width="30%"
          :before-close="handleClose">
          <span>确认审核该文章通过吗</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible3 = false">取 消</el-button>
            <el-button type="primary" @click="Pass(1)">确 定</el-button>
          </span>
        </el-dialog>
       <el-button type="primary" @click="dialogVisible4 = true" v-if="articleDetail.author.status=='approved' || articleDetail.author.status=='pending'">审核不通过</el-button>

        <el-dialog
          title="提示"
          :visible.sync="dialogVisible4"
          width="30%"
          :before-close="handleClose">
          <span>确认审核该文章不通过吗</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible4 = false">取 消</el-button>
            <el-button type="primary" @click="Pass(0)">确 定</el-button>
          </span>
        </el-dialog>
        
      </div>
      <div class="cross"v-if="this.to=='User'">
          <el-button type="primary" @click="dialogVisible = true"  v-if="this.userState== 'readAndWrite'" >封禁用户</el-button>
         <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <span>确认封禁该用户吗？</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="ban(0)">确 定</el-button>
          </span>
        </el-dialog>

            <el-button type="primary" @click="dialogVisible2 = true" v-if="this.userState== 'read'">解禁用户</el-button>
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible2"
          width="30%"
          :before-close="handleClose">
          <span>确认解禁该用户吗</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="ban(1)">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    

    <div class="buttom"><ButtomBox/></div>
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

import {getArticleDetail,ban,reviewArticle,getPendingArticle,getUserInfo,getAllArticle} from '@/api/api'
import ButtomBox from '../components/ButtomBox.vue'
import Bar from '../components/Bar.vue'
export default {
  name: 'ArticleDetail',
  components:{
    ButtomBox,Bar,mavonEditor
  },
   created(){
    // this.to=this.$route.params.to
    if( this.$route.params.to){
      this.to = this.$route.params.to
    }
    else{
      this.to = localStorage.getItem('to')

    }
    //用来封禁的userid_ban
     if( this.$route.params.userid_ban){
      this.userid_ban = this.$route.params.userid_ban
    }
    else{
      this.userid_ban = localStorage.getItem('userid_ban')

    }
    getUserInfo(this.userid_ban).then((response) => {
      this.userState = response.data.state
      console.log(this.userState,'userState')
      })
    console.log(this.userid_ban,'this.userid_ban')
    if( this.$route.params.articleId){
      this.articleId = this.$route.params.articleId
      console.log('articleId',this.articleId)
    }
    else{
      this.articleId = localStorage.getItem('articleId')
        console.log('articleId',this.articleId)
    }
    getArticleDetail(this.articleId).then((response) => {
      console.log(response)
      this.articleDetail=response.data
      console.log(this.articleDetail,'articleDetail')
      })
      
  },
  data(){
    return{
      userid_ban:'',
      aeticleId:'',
      articleDetail:{},
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3:false,
      dialogVisible4:false,
      userState:''
    }
  },
  methods:{
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    ban(state){
      console.log('ban',this.userid_ban)
      const data ={
        userid:this.userid_ban,
        state:state//0是封禁
      }
      console.log(data)
      ban(data).then((response) => {
        console.log('data',response)
         this.$router.push(
          {
            name:'UserArt'
          }
        )
        if(state == '0'){
            alert('已成功封禁该用户')
            
        }
        else{
          alert('已成功解禁该用户')
        }
      })
    },
    Pass(state){
       console.log('pass',this.articleId)
      const data ={
        articleId:this.articleId,
        state:state//1是同意
      }
      console.log(data)
      reviewArticle(data).then((response) => {
      console.log('data',response)
        getPendingArticle().then((response) => {
            console.log('getPendingArticle',response)
              this.tableData=response.data
            })
           getAllArticle().then((response) => {
          console.log(response)
            this.tableData=response.data
          })
      })
      if(state == '1'){
        this.dialogVisible3 = false
            alert('已对该文章审核成功')
        }
        else{
          this.dialogVisible4 = false
          alert('不同意该文章过审')
        }
          this.$router.push(
          {
            name:'Manager',
            params:{
              activeName:'second'
            }
          }
        )
    },
    goBack(){
      if(this.to == 'User'){
          this.$router.push(
          {
            name:'UserArt'
          }
        )
      } else{
        this.$router.push(
          {
            name:'Manager',
            params:{
              activeName:'second'
            }
          }
      )
      }
    }
      
    }
}
</script>

<style>
.art_num{
  margin-top: 5px;
}
.cross{
  margin-top: 2vh;
}
.context{
  width: 80vw;
  background-color: #fff;
  height: 30vh;
  overflow-y: scroll;
}
.modify_box{
  margin-top: 2vh;
}
.article_img{
  width: 5vw;
  height: 5vw;
  margin-left: 5vw;
}
.top_box{
  background-color: #fff;
  display: flex;
  height: 7vw;
  width: 100%;
}
.content_box {
    height: 85vh;
    width: 80vw;
    padding-left: 10vw;
    padding-right: 10vw;
    background-color: #EFEFEF;
}
.goback{
   margin-top: 1vh;
  background-color: #fff;
  margin-bottom: 1vh;
  height: 5vh;
  align-items: center;
}
</style>